<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <t-btn color="accent" label="Fit Menu" style="width: 280px">
        <t-menu fit>
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>New tab</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>New incognito tab</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Recent tabs</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>History</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Downloads</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Settings</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Help &amp; Feedback</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="brown" label="Max Height Menu">
        <t-menu max-height="130px">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>New tab</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>New incognito tab</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Recent tabs</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>History</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Downloads</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Settings</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Help &amp; Feedback</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="indigo" label="Max Width Menu">
        <t-menu max-width="80px">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">New tab</t-item-label>
              </t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">New incognito tab</t-item-label>
              </t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">Recent tabs</t-item-label>
              </t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">History</t-item-label>
              </t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">Downloads</t-item-label>
              </t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">Settings</t-item-label>
              </t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>
                <t-item-label lines="1">Help & Feedback</t-item-label>
              </t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>
    </div>
  </div>
</template>
